.body{
  background: #FFFFFF;
}

.wrapper{
  padding-top: 286px;
  width: 750px;
  background: url('https://oss.cloudcpc.com/94ac3c80c768314394c411cf1a9f5ca3.png')   no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

.wrapper-top-Title{
  margin-bottom: 20px;
  width: 750px;
  font-size: 42px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 43px;
  text-align:center;
}

.wrapper-top-sub{
  margin-bottom: 113px;
  width: 467px;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 48px;
  text-align:center;
}

.wrapper-white{
  position: relative;
  margin-top: -35px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center; 
  background: #FFFFFF;
  border-radius: 40px 40px 0px 0px;
  padding: 65px 16px 20px 16px;
  overflow-x: hidden;
}

.top-Title{
  margin-bottom: 58px;
  font-size: 36px;
  font-weight: 500;
  color: #18202D;
  line-height: 34px;
}

.top-sub{
  width: 666px;
  margin-bottom: 57px;
  text-align: center;
  font-size: 24px;
  color: #888888;
  line-height: 36px;
}

.wrapper-list-back{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 8px;
  margin-right: 3px;
}

.wrapper-list-white{
  margin-bottom: 25px;
  margin-left: 20px;
  margin-right: 20px;
  width: 190px;
  height: 56px;
  border-radius: 28px;
  border: 1px solid rgba(163, 189, 255, 1);
  background-color: #CFDEFE;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wrapper-list-txt{
  text-align: center;
  width: 190px;
  line-height: 56px;
  font-size: 24px;
  color: #558DFD;
}


.top-iamge{
  width: 601px;
  height: 445px;
  transform: scale(1);
  -webkit-animation-name: scaleDraw; /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
  -webkit-animation-duration: 5s; /*动画所花费的时间*/

}

.framework-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center; 
  background: #FFFFFF;
}

.framework-img-back{
  width: 750px;
  height: 591px;
  background: url('https://oss.cloudcpc.com/ff89d8bb6fab3555bee21fe9f618fca2.png')   no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 69px;
}

.framework-Title{
  margin-bottom: 30px;
  width: 100%;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 34px;
  text-align: center;
}

.framework-sub{
  margin-bottom: 80px;
  width: 100%;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 36px;
  text-align: center;
}

.framework-scroll-white{
  display: inline-block;
  width: 100%;
}

.framework-scroll-view-white{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: 32px;
  margin-right: 32px;
}

.framework-white{
  display: flex;
  flex-direction: row;
  margin-right: 22px;
}

.framework-white-num{
  width: 50px;
  height: 38px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
}

.framework-white-right{
  display: flex;
  flex-direction: column;
}

.framework-white-txt{
  margin-bottom: 20px;
  width: 100px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 34px;
}

.framework-white-sub{
  width: 270px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 36px;
}

.framework-down{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750px;
  height: 583px;
  background: #FFFFFF;
  padding-top: 30px;
  overflow: hidden;
}

.framework-down-iamge{
  width: 480px;
  height: 482px;
  margin-bottom: 60px;
}

.left-img{
  position: absolute;
  left: 210px;
  top: 164px;
  width: 62px;
  height: 38px;
}

.right-img{
  position: absolute;
  left: 447px;
  top: 60px;
  width: 122px;
  height: 36px;
}

.left-list{
  position: absolute;
  left: 0px;
  top: 158px;
  display: flex;
  flex-direction: column;
}

.left-list-white{
  display: flex;
  flex-direction: row-reverse ;
  justify-content: center;
  margin-bottom: 10px;
  width: 220px;
  text-align: right;
}

.left-list-sub{
  width: 220px;
  font-size: 17px;
  color: #505C6B;
  line-height: 40px;
}

.left-list-img{
  width: 12px;
  height: 14px;
  margin-top: 10px;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-list{
  position: absolute;
  left: 575px;
  top: 50px;
  display: flex;
  flex-direction: column;
}

.right-list-white{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
}

.down-left-white{
  position: absolute;
  left: 53px;
  top: 498px;
  width: 350px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.down-right-white{
  position: absolute;
  left: 431px;
  top: 498px;
  width: 350px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
}

.down-left-img{
  width: 12px;
  height: 14px;
  margin-top: 10px;
  margin-right: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.down-left-sub{
  width: 350px;
  font-size: 20px;
  color: #505C6B;
  line-height: 40px;
}

.overview-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center; 
  background: #FFFFFF;
}

.overview-Title{
  margin-bottom: 36px;
  font-size: 36px;
  font-weight: 500;
  color: #18202D;
  line-height: 34px;
}

.overview-white{
  width: 717px;
  height: 326px;
  background: url('https://oss.cloudcpc.com/e5f868672f4f3e44803ff88d84ca8f00.png')   no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.overview-white-name{
  margin-right: 45px;
  width: 60px;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 30px;
}

.overview-white-sub{
  width: 524px;
  font-size: 26px;
  color: #888888;
  line-height: 42px;
}

.overview-top-iamge{
  margin-top: 15px;
  margin-top: 51px;
  width: 716px;
  height: 296px;
  margin-bottom: 30px;
}
.overview-down-iamge{
  width: 738px;
  height: 412px;
  margin-bottom: 30px;
}

.overview-list-white{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
  margin-right: 69px;
}

.overview-list-num{
  z-index: 66;
  width: 60px;
  height: 38px;
  background: linear-gradient(90deg, #7B98FF, #3E68FF);
  box-shadow: 0px 6px 16px 0px rgba(117, 147, 255, 0.18);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overview-list-num2{
  background: linear-gradient(90deg, #9567FF, #AA98FD);
  box-shadow: 0px 6px 16px 0px rgba(150, 105, 255, 0.26);
}

.overview-list-num3{
  background: linear-gradient(90deg, #64EBD4, #31CCB1);
  box-shadow: 0px 6px 16px 0px rgba(52, 206, 179, 0.16);
}

.overview-list-num4{
  background: linear-gradient(90deg, #FCC280, #FFA85B);
  box-shadow: 0px 6px 16px 0px rgba(255, 169, 93, 0.12);
}


.overview-list-num-iamge{
  width: 26px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overview-list-num-iamge2{
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overview-list-num-iamge3{
  width: 31px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overview-white-right{
  z-index: 55;
  margin-left: -39px;
  width: 180px;
  height: 56px;
  background: #FFFFFF;
  box-shadow: 0px 6px 22px 0px rgba(193, 208, 233, 0.55);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.overview-white-txt{
  margin-left: 64px;
  width: 100px;
  font-size: 18px;
  color: #535E72;
  line-height: 56px;
}

.value-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  width: 750px;
}

.value-back{
  width: 750px;
  height: 544px;
  background: url('https://oss.cloudcpc.com/077f391100b9393d9f55942786c88d2e.png')   no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
  padding-top: 76px;
  margin-bottom: 323px;
}

.value-top-Title{
  margin-bottom: 30px;
  width: 100%;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 34px;
  text-align: center;
}

.value-top-sub{
  width: 685px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 36px;
  text-align: center;
}

.value-scroll{
  position: absolute;
  left: 0;
  top: 275px;
  width: 100%;
}

.value-scroll-view-white{
  display: flex;
  flex-direction: row;
  margin-left: 32px;
  margin-right: 32px;
  width: 1230px;
  // height: 522px;
}

.value-img{
  width: 224px;
  height: 442px;
  margin-right: 20px;
 
  display: flex;
  flex-direction: column;
}

.value-white-sub{
  width: 174px;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 210px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 42px;
  text-align: center;
}

.me-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  width: 750px;
}

.me-top-Title{
  margin-bottom: 36px;
  width: 100%;
  font-size: 36px;
  color: #18202D;
  line-height: 34px;
  text-align: center;
}

.me-top-sub{
  margin-bottom: 63px;
  width: 100%;
  font-size: 24px;
  color: #888888;
  line-height: 36px;
  text-align: center;
}

.me-iamge{
  width: 669px;
  height: 396px;
  margin-bottom: 66px;
}

.me-sub-back{
  margin-left: auto;
  margin-right: auto;
  width: 624px;
  background: linear-gradient(0deg, #0071FF 0%, #318CFF 100%);
  border-radius: 40px 40px 40px 0px;
  padding: 57px 32px;
  display: flex;
  flex-direction: column;
}

.me-sub{
  width: 100%;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 42px;
}




@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0%{
      transform: scale(1);  /*开始为原始大小*/
      opacity: 1;
  }
  25%{
      transform: scale(1.2); /*放大1.1倍*/
      opacity: 0.4;
  }
  50%{
      transform: scale(1);
      opacity: 1;
  }
  75%{
      transform: scale(1.2);
      opacity: 0.4;
  }
  } 